<!--
 * @Author: Haochen
 * @Date: 2021-12-23 21:17:04
 * @LastEditTime: 2021-12-29 19:51:04
 * @FilePath: \recipes-admin-system\src\views\admins\Admins.vue
-->

<!--
 * @Author: Haochen
 * @Date: 2021-12-07 17:37:29
 * @LastEditTime: 2021-12-15 09:50:14
 * @FilePath: \students-system\src\views\students\StudentsList.vue
-->
<template>
  <div class="users-container">
    <bread-crumb></bread-crumb>

    <div class="search-area">
      <el-input type="text" v-model="searchValue"> </el-input>
      <el-button type="primary" @click="searchAdmin">搜索</el-button>

      <el-button type="primary" @click="dialogFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i> 添加
      </el-button>
    </div>

    <el-dialog
      width="500px"
      :append-to-body="true"
      title="添加新用户"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="newAdmin">
        <el-form-item label="账户名" :label-width="formLabelWidth">
          <el-input v-model="newAdmin.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="newAdmin.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="newAdmin.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="newAdmin.telephone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :data="adminsByPage"
      border
      style="width: 100%"
      :header-cell-style="rowClass"
      :cell-style="rowClass"
      :stripe="true"
      :highlight-current-row="true"
    >
      <el-table-column label="用户编号">
        <template slot-scope="scope">
          <span>{{ scope.row._id.substr(-5) }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="account" label="用户名"> </el-table-column>
      <el-table-column prop="realname" label="真实姓名"> </el-table-column>
      <el-table-column prop="telephone" label="联系方式"> </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteAdmin(scope.row._id)"
            ><i class="el-icon-circle-close"></i> 删除</el-button
          >

          <!-- v-auth -->
        </template>
      </el-table-column>
    </el-table>

    <pages
      :total="total"
      :currentPage="pageData.currentPage"
      :pageSize="pageData.pageSize"
      @prevPage="prevPage"
      @nextPage="nextPage"
    />
  </div>
</template>

<script>
import Pages from '../../components/common/Pages.vue';
import BreadCrumb from '../../components/common/BreadCrumb.vue';

import bus from '@/utils/bus.js';
import pageMixin from '@/mixins/pageMixin';

import { createNamespacedHelpers } from 'vuex';
const {
  mapActions: adminsActions,
  mapState: adminsState,
  mapMutations: adminsMutations,
  mapGetters: adminsGetters,
} = createNamespacedHelpers('admins');

export default {
  mixins: [pageMixin],
  components: {
    pages: Pages,
    'bread-crumb': BreadCrumb,
  },
  data() {
    return {
      dialogFormVisible: false,
      newAdmin: {},
      formLabelWidth: '80px',
      searchValue: '',
    };
  },
  computed: {
    ...adminsState(['admins', 'total', 'pages']),
    ...adminsGetters(['adminsByPage']),
  },
  created() {
    this.getAllAdmins();

    bus.$on('handleSizeChange', (size) => {
      this.pageData.pageSize = size;
      this.getAllAdmins();
    });

    bus.$on('handleCurrentChange', (currentPage) => {
      this.pageData.currentPage = currentPage;
      this.getAllAdmins();
    });
  },
  methods: {
    ...adminsActions(['getAllAdminsAsync']),
    ...adminsMutations(['SET_PAGESIZE', 'SET_CURRENT']),

    async getAllAdmins(searchValue) {
      this.getAllAdminsAsync(searchValue);
      this.SET_PAGESIZE(this.pageData.pageSize);
      this.SET_CURRENT(this.pageData.currentPage);
      //   console.log(this.$store.state);
      //   console.log(this.admins);
    },

    rowClass() {
      return 'text-align:center';
    },

    async addAdmin() {
      this.dialogFormVisible = false;
      console.log(this.newAdmin);
      const { data: res } = await this.$api.admins.addAdmin(this.newAdmin);
      if (res.code === 200) {
        // this.$message({
        //   message: res.msg,
        //   type: 'success',
        // });

        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success',
        });
        this.getAllAdminsAsync();
      }
      // console.log(res);
    },

    async deleteAdmin(id) {
      let _id = { _id: id };
      const { data: res } = await this.$api.admins.deleteAdmin(_id);
      if (res.code === 200) {
        // this.$message({
        //   type: 'success',
        //   message: res.msg,
        // });

        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success',
        });

        this.getAllAdminsAsync();
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg,
        });

        // this.$message.error(res.msg);
      }
    },

    searchAdmin() {
      this.getAllAdmins(this.searchValue);
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  watch: {
    pageData: {
      handler(val) {
        this.getAllAdmins();
      },
      deep: true,
    },

    'pageData.pageSize'() {
      this.pageData.currentPage = 1;
      this.getAllAdmins();
    },

    searchValue(val) {
      if (!val) {
        this.getAllAdmins(val);
      }
    },
  },
};
</script>

<style scoped lang="scss">
a {
  text-decoration: none;
  color: rgb(124, 124, 124);
}

.users-container {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  table {
    margin: 20px 0;
    width: 100%;
    text-align: center;
    border: 1px solid #ccc;
    border-collapse: collapse;
    tr td,
    th {
      height: 50px;
      border: 1px solid #ccc;
      img {
        width: 50px;
        height: 50px;
      }
    }
  }
}

.search-area {
  margin-bottom: 30px;
  height: 30px;
  .el-input {
    width: 200px;
    height: 30px;
    margin-right: 10px;
  }
}

.el-input {
  width: 90%;
}
</style>
